<template>
    <div>
        <div>姓名:{{ teacher.name }}</div>
        <div>年龄:{{ teacher.age }}</div>
        <div>职位:{{ teacher.job }}</div>
    </div>
    <div>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeJob">修改职位</button>
    </div>
</template>
<script lang='ts' setup>
   interface PersonType{
        readonly name:string
        age:number
        job:string
    }
  import {ref} from 'vue'
  const teacher=ref<PersonType>({name:'李四',age:23,job:"讲师"})
  const changeAge=()=>teacher.value.age++
  const changeJob=()=>teacher.value.job="IT讲师"
</script>
<style lang='scss' scoped>
</style>